<template>
  <div class="major-view" v-loading="loading">
    <div class="major-view-back">
      <router-link to="/colleges">
        <el-button>返回上一级</el-button>
      </router-link>
    </div>
    <div class="major-view-header">
      <div class="view-header-left">
        <div  class="view-header-img">
          <img v-if="schoolDetail.logo" :src="schoolDetail.logo" alt="">
          <img v-else src="../../assets/img/no-img.png" alt="">
        </div>
        <div class="view-header-title">
          <div>{{ schoolDetail.name_zh }}</div>
          <div>{{ schoolDetail.name }}</div>
          <div class="header-title-info">
            <el-icon><Location/></el-icon>
            <span v-for="(item) in state.areaList" :key="item.id">
              <span v-if="Number(schoolDetail.areas_id) === item.id">{{item.name}}</span>
            </span>
          </div>
        </div>
      </div>
      <div class="view-header-right">
        <div class="header-right-qs">{{ schoolDetail.qs || 0}}</div>
        <div class="header-right-qstitle">QS排名</div>
      </div>
    </div>
    <div class="major-view-main">
      <div class="view-main-header">
        <h2 class="view-main-title">学院</h2>
        <el-button type="primary" @click="addMajor('add')">新增学院</el-button>
        <el-input clearable placeholder="请输入要搜索的学院名称" v-model="majorSearchName" class="input-with-select">
          <template #append>
            <el-button class="input-with-button" @click="searchSchool">搜索</el-button>
          </template>
        </el-input>
      </div>
      <div class="view-main-table">
        <el-table v-if="state.majorListData.length > 0" :data="state.majorListData" border>
          <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
          <el-table-column label="学院名称" show-overflow-tooltip align="center">
            <template #default="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column label="是否启用" show-overflow-tooltip width="280" align="center">
            <template #default="scope">
              <el-switch :before-change="() => onBeforeChange(scope.row)" v-model="scope.row.status" :disabled="!scope.row.parent_status" :active-value="1" :inactive-value="0" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"></el-switch>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="220" show-overflow-tooltip align="center">
            <template #default="scope">
              <el-button @click.prevent="details(scope.row)" type="warning" size="small">专业详情</el-button>
              <el-button @click.prevent="addMajor('update',scope.row)" type="primary" size="small">学院修改</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-else class="right-view-nodata">
          <img src="@/assets/img/no-data.png" alt="">
          <div>暂无数据</div>
        </div>
      </div>
    </div>
    <!-- 新增修改专业 -->
    <el-dialog
      width="40%"
      :title="titleName + '学院数据'"
      :close-on-click-modal="false"
      v-model="majorVisible">
      <el-form>
        <el-form-item label="学院名称" :label-width="80" required>
          <el-input v-model="majorName" autocomplete="off" placeholder="请输入学院名称"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="majorVisible = false">取 消</el-button>
          <el-button type="primary" @click="onsubmit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { useRoute ,useRouter} from "vue-router";
const route = useRoute()
const router = useRouter()
import { ref,reactive,onMounted } from 'vue';
import {Location} from "@element-plus/icons-vue";
import { ElMessage ,ElMessageBox} from 'element-plus';
import API from "@/utils/api";
let queryInfo = route.query
let schoolDetail = ref(queryInfo)

// console.log(schoolDetail.value,'params');
let majorName = ref('')
let majorSearchName = ref('')
let loading = ref(false)
let majorVisible = ref(false)
let titleName = ref('新增')
let majorState = ref('')
let operationStatus = ref(localStorage.getItem('operationStatus'))
let state = reactive({
    majorListData: [],
    majorRowItem:{},
    areaList:[],
});
// 获取地区数据
function getAreaList () {
  loading.value = true
  API.schoolList.getAreaList({}, (res) => {
    loading.value = false
    if(res.code == 0) {
      state.areaList = res.data
    }
  })
}
function details(item) {
  router.push({path: '/major', query: {
    departments_id:item.id,  //学院ID
    id:item.colleges_id,  // 学校ID
    areas_id:item.areas_id,
    logo:schoolDetail.value.logo,
    name:schoolDetail.value.name,
    name_zh:schoolDetail.value.name_zh,
    qs:schoolDetail.value.qs,
  }})
}
// 新增、修改提交
function onsubmit() {
  if(!majorName.value) {
    return ElMessage.warning('请输入学院名称')
  }
  if(majorState.value === 'add') {
    loading.value = true
    API.majorList.addMajor({
      colleges_id:schoolDetail.value.id,
      name:majorName.value,
    }, (res) => {
      loading.value = false
      if(res.code == 0) {
        majorVisible.value = false
        getMajorList ()
        ElMessage.success ('新增成功')
      }else {
        ElMessage.warning('新增失败')
      }
    })
  }else {
    loading.value = true
    API.majorList.modifyMajor({
      colleges_id:state.majorRowItem.colleges_id,
      id:state.majorRowItem.id,
      name:majorName.value,
    }, (res) => {
      loading.value = false
      if(res.code == 0) {
        majorVisible.value = false
        ElMessage.success ('修改成功')
        getMajorList ()
      }else {
        ElMessage.warning('修改失败')
      }
    })
  }
}
function addMajor(type,item) {
  if(type === 'update') {
    majorName.value = item.name
    titleName.value = '编辑'
  }else {
    majorName.value = null
    titleName.value = '新增'
  }
  majorState.value = type
  majorVisible.value = true
  state.majorRowItem = item
}
function searchSchool() {
  getMajorList()
}
// 获取学院数据
function getMajorList () {
  loading.value = true
  API.majorList.getMajorList({
    colleges_id:schoolDetail.value.id,
    name:majorSearchName.value,
  }, (res) => {
    loading.value = false
    if(res.code == 0) {
      state.majorListData = res.data
    }
  })
}
function onBeforeChange (value, clickedData) {
  if(value.status === 1) {
    return new Promise((resolve) => {
      let titel = value.status === 1 ? '禁用' : '启用'
      ElMessageBox.confirm(`此操作将${titel}该学院下面所有的专业, 是否继续?`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      }).then(() => {
        API.majorList.isEnabledDepartment({id:value.id}, (res) => {
          if(res.code == 0) {
            getMajorList()
            ElMessage({type: 'success',message: '操作成功!',});
          }
        })
        return resolve()
      }).catch(() => {
        ElMessage({type: 'info',message: '已取消操作',});
      });
    })
  }else {
    return new Promise((resolve) => {
      API.majorList.isEnabledDepartment({id:value.id}, (res) => {
        if(res.code == 0) {
          getMajorList()
          ElMessage({type: 'success',message: '操作成功!',});
        }
      })
      return resolve()
    })
  }
}
onMounted(() => {
  getMajorList()
  getAreaList()
})
</script>

<style lang="scss" scoped>
.major-view {
  overflow: auto;
  height: 100vh;
  position: relative;
  .major-view-back {
    position: absolute;
    margin: 10px;
  }
  .major-view-header {
    background-image: url('https://3mir.cc/_nuxt/img_21_1.c2cc0e14.png') ;
    background: #bdd2e7;
    height: 180px;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .view-header-left {
      display: flex;
      justify-content: space-around;
      align-items: center;
      .view-header-img {
          height: 100px;
          width: 100px;
          border-radius: 100%;
          border: 8px solid #fff;
        img {
          height: 100%;
          width: 100%;
          border-radius: 100%;
        }
      }
      .view-header-title {
        color: #fff;
        font-size: 18px;
        line-height: 25px;
        text-align: start;
        margin-left: 20px;
        .header-title-info {
          font-size: 16px;
          display: flex;
          align-items: center;
        }
      }
    }
    .view-header-right {
        background-origin: padding-box;
        background-position: 0 0;
        background-repeat: no-repeat;
        background-image: url('') ;
        background-size: 100% 100%;
        width: 68px;
        height: 81px;
        padding: 15px 20px 20px;
        .header-right-qs {
          color: #c21920;
          font-size: 1.5rem;
          font-weight: 600;
          margin-left: .06rem;
          text-align: center;
          white-space: nowrap;
        }
        .header-right-qstitle {
          color: #fff;
        }
    }
  }
  .major-view-main {
    padding: 0 20px 30px;
    .view-main-header {
      display: flex;
      align-items: center;
      .view-main-title {
        text-align: start;
        margin-right: 20px;
      }
      .input-with-button {
        color: #fff;
        background: #409eff;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
    .view-main-table {
      .right-view-nodata {
        margin-top: 120px;
      }
    }
  }
  .el-input-group {
    width: 30%;
    margin-left: 20px;
  }
}
::v-deep .el-scrollbar__bar.is-vertical {
  display: none;
}
</style>